<template>
  <div class="container">
    <div class="header">
      <div class="header_top">
        <div class="flex">
          <i class="iconfont icon-huatong"></i>
        <input
          class="iconfont-unicode"
          type="text"
          :placeholder="icon + '搜索音乐、歌词、电台'"
        />
        <i class="iconfont icon-shuju01"></i>
        </div>
        
        <div class="menu">
          <span class="menu_text">个性推荐</span>
          <span class="menu_text">歌单</span>
        </div>
      </div>
      <div class="header_body" ref="">
        <div class="ShufflingFigure">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="item in Albums"
              :key="item.id"
              class="itemClass"
              :style="getimg(item)"
            >
              <div>{{ item.name }}</div>
              <div>{{ item.artist.name }}</div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="FM-recommended">
          <div class="FM">
            <div class="border">
              <i class="iconfont icon-shouyinji"></i>
            </div>
            <div class="text">私人FM</div>
          </div>
          <div class="Recommended-daily">
            <div class="icon_30">
              <i class="iconfont icon-30"></i>
            </div>
            <div class="text">每日歌曲推荐</div>
          </div>
          <div class="song-list">
            <div class="border3">
              <i class="iconfont icon-paixingbang"></i>
            </div>
            <div class="text">云音乐新歌榜</div>
          </div>
        </div>
        <div class="Recommended-playlists">
          <div class="left">
            <i class="iconfont icon-wancheng"></i>
            <span class="left_text">推荐歌单</span>
          </div>
          <div class="right">
            <span class="rigth_txet">更多</span>
          </div>
        </div>

        <div class="playlists">
          <div v-for="item in playLists" :key="item.id" class="list1">
            <router-link
              :to="{
                name: 'playlist',
                query: {id:item.id,
                name:item.name,
                url:item.picUrl},
              }"
            >
              <div :style="getlistimg(item.picUrl)" class="list-img"></div>
            </router-link>
            <div class="list-text">
              {{ item.name.slice(0, 16) }}
              <span v-if="item.name.length > 10"> . . .</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getThelatestAlbum } from "../../api/getShufflingFigure.js";
import { getPlaylists } from "../../api/getPlaylist";

export default {
  data() {
    return {
      icon: "\ue651",
      Albums: "",
      playLists: [],
      picUrl: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    getThelatestAlbums() {
      getThelatestAlbum()
        .then((res) => {

          if (res.data.code === 200) {
            this.Albums = res.data.albums;
          }
        })
        .catch((Error) => {
          console.log(Error);
        });
    },
    getPlaylists() {
      getPlaylists(30).then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          this.playLists = res.data.result;
        }
        // console.log(this.playLists);
      });
    },
    getlistimg(url) {
      // console.log(2522, url);
      return {
        backgroundImage: "url(" + url + ")",
        "background-repeat": "no-repeat",
        "background-size": "100% 100%",
        height: "130px",
        width: "100%",
      };
    },
    getimg(item) {
      return {
        // 'background-image': url(item.picUrl),
        backgroundImage: "url(" + item.picUrl + ")",
        "background-repeat": "no-repeat",
        "background-size": "100% 100%",
      };
    },
  },
  created() {},
  mounted() {
    this.getThelatestAlbums();
    this.getPlaylists();
    setTimeout(() => {
      this.getlistimg();
    }, 100);
  },
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  box-sizing: border-box;
}
.iconfont-unicode {
  font-family: myFirstFont, "iconfont";
  /* font-family:  */
  font-size: 16px;
  font-style: normal;
  border: 1px solid #f2f2f2;
  border-radius: 18px;
  width: 60vw;
  height: 28px;
  background-color: #f2f2f2;
  vertical-align: middle;
}
.header {
  margin-top: 20px;
  height: 100%;
  .header_top {
    box-sizing: border-box;
  
    padding: 0 15px 10px 15px;
    .flex{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .menu {
      margin-top: 25px;
      display: flex;
      justify-content: space-around;
      .menu_text {
        color: #434343;
        font-size: 20px;
        // margin-left: 80px;
        // margin-right: 10px;
      }
    }
    .icon-huatong {
      font-size: 30px;
      margin-top: 10px;
      vertical-align: middle;
      // margin-right: 20px;
    }
    .icon-shuju01 {
      font-size: 30px;
      margin-top: 10px;
      vertical-align: middle;
      //   margin-right: 30px;
    }
  }
  .header_body {
    height: calc(100% - 120px);
    overflow: auto;
    .FM-recommended {
      padding-bottom: 18px;
      border-bottom: 1px solid #cdc6c6;
      box-sizing: border-box;
      // padding: 10px;
      display: flex;
      justify-content: space-around;
      .text {
        font-size: 18px;
      }
      .icon_30 {
        padding: 5px;
        .icon-30 {
          color: #555456;
          font-size: 76px;
        }
      }
      .border3 {
        box-sizing: border-box;
        margin-left: 10px;
        padding-top: 5px;
        margin-top: 18px;
        height: 68px;
        width: 68px;
        border-radius: 50%;
        border: 4px solid #555456;
        .icon-paixingbang {
          padding-top: 5px;
          font-size: 45px;
        }
      }
      .border {
        margin-top: 18px;
        height: 60px;
        width: 60px;
        border-radius: 50%;
        border: 4px solid #555456;
        .icon-shouyinji {
          font-size: 45px;
        }
      }
    }
    .ShufflingFigure {
      margin-top: 0px;
      height: 40%;
      .my-swipe {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: pink;
        height: 100%;
        .itemClass {
          height: 100% !important;
        }
      }
    }
    .Recommended-playlists {
      padding-top: 20px;
      box-sizing: border-box;
      .left {
        float: left;
        margin-left: 15px;
        .left_text {
          vertical-align: middle;
        }
        .icon-wancheng {
          font-size: 25px;
          vertical-align: middle;
        }
      }
      .right {
        float: right;
        margin-right: 15px;
        .rigth_txet {
          color: #a5a5a5;
        }
      }
    }
    .playlists {
      height: 500px;
      margin-top: 35px;
      padding-left: 15px;
      display: flex;
      flex-wrap: wrap;
      .list1 {
        margin-right: 10px;
        width: 30%;
        // .list-img {
        // }
        .list-text {
          line-height: 14px;
          text-align: left;
          padding: 4px 0;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
          color: #666;
          word-break: break-all;
          white-space: normal;
          overflow: hidden;
          // overflow-wrap: break-word;
          // text-overflow:ellipsis;
          width: 100%;
          // overflow: auto;
        }
      }
    }
  }
}
@font-face {
  font-family: "iconfont"; /* Project id 3276430 */
  src: url("//at.alicdn.com/t/font_3276430_k01wjdwp1qc.woff2?t=1648888098090")
      format("woff2"),
    url("//at.alicdn.com/t/font_3276430_k01wjdwp1qc.woff?t=1648888098090")
      format("woff"),
    url("//at.alicdn.com/t/font_3276430_k01wjdwp1qc.ttf?t=1648888098090")
      format("truetype");
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #a5a5a5 !important;
  text-align: center;
}
</style>